<template>
	<view class="bigbox">
		<view class="box">
			<view class="leftbox">
				<view class="title">
					我的余额
				</view>
				<view class="price">
					{{money}}
				</view>
			</view>
			<view class="tixin" @click="apply">
				立即提现
			</view>
		</view>
		<view class="ximing">
			余额明细
		</view>
		<view class="biaoti">
			<view class="">
				名称
			</view>
			<view class="">
				金额
			</view>
			<view class="">
				时间
			</view>
		</view>
		<view class="order" v-for="(item,index) in list">
			<view class="title">
				{{item.type}}
			</view>
			<view class="price" v-if="item.money>0">
				+{{item.money}}
			</view>
			<view class="prices" v-else>
				{{item.money}}
			</view>
			<view class="time">
				{{item.create_time}}
			</view>
		</view>
	</view>
</template>

<script>
	import {getusermoney,
	getdetailedlist } from "../../api/api/index.js"
	export default {
		data(){
			return{
				money:0.00,
				list:[],
				page:0,
				limit:20,
				flag:false
			}
			
		},
		methods:{
			public(){
				uni.showLoading({
					title:"加载中",
					mask:true
				})
				getusermoney().then(res=>{
					uni.hideLoading()
					console.log(res.data)
					this.money=res.data.money
				})
			},
			getlist(flag){
				if(this.flag){
					return uni.showToast({
						title:"没有更多了",
						icon:"none",
						duration:2000
					})
				}
				uni.showLoading({
					title:"记载中",
					mask:true
				})
				this.page++
				let data={
					page:this.page,
					limit:this.limit
				}
				getdetailedlist(data).then(res=>{
					uni.hideLoading()
					this.list = this.list.concat(res.data)
					if (res.data.length < this.limit) {
						this.flag = true
					}
				})
			},
			apply(){
				this.jumpLink({link:"/pagesA/applywithdraw/index"})
			}
		},
		onShow() {
			this.public()
			this.getlist()
		},
		onReachBottom() {
			this.getlist()
		}
	}
</script>

<style scoped lang="scss">
	.bigbox {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.box {
		width: 710rpx;
		height: 232rpx;
		background-color: #ffc600;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 50rpx;
		padding-right: 44rpx;
		box-sizing: border-box;

		.leftbox {
			.title {
				font-family: PingFang-SC-Medium;
				font-size: 24rpx;
				color: #000000;
			}

			.price {
				font-family: PingFang-SC-Heavy;
				font-size: 60rpx;
				color: #000000;
				font-weight: 700;
			}
		}

		.tixin {
			width: 160rpx;
			height: 56rpx;
			background-color: #000000;
			border-radius: 28rpx;
			text-align: center;
			line-height: 56rpx;
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: #ffffff;
		}
	}

	.ximing {
		font-family: MicrosoftYaHei-Bold;
		font-size: 30rpx;
		color: #000000;
		font-weight: 700;
		margin-top: 55rpx;
		margin-left: 23rpx;
	}

	.biaoti {
		display: flex;
		justify-content: space-around;
		border-bottom: 2rpx solid #ededed;
		margin-top: 60rpx;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #000000;
	}

	.order {
		display: flex;
		margin-top: 40rpx;

		.title {
			width: 97rpx;
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: #000000;
			margin-left: 80rpx;
		}

		.price {
			width: 105rpx;
			font-family: PingFang-SC-Heavy;
			font-size: 30rpx;
			color: #ff3300;
			margin-left: 136rpx;
			text-align: center;
		}

		.prices {
			width: 105rpx;
			font-family: PingFang-SC-Heavy;
			font-size: 30rpx;
			color: #3366cc;
			margin-left: 136rpx;
			text-align: center;
		}

		.time {
			width: 225rpx;
			font-family: PingFang-SC-Medium;
			font-size: 22rpx;
			color: #999999;
			margin-left: 104rpx;
		}
	}
</style>
